<script setup>
import { useStore } from "@/store";
import { ref } from "vue";
const store = useStore()
const userInfo  = store['getUserInfo']
const orderList = [
  {
    name: '待取件',
    icon: '/static/mineIcon/pickup.png'
  },
  {
    name: '待验收',
    icon: '/static/mineIcon/acceptance.png'
  },
  {
    name: '已完成',
    icon: '/static/mineIcon/done.png'
  },
  {
    name: '寄回',
    icon: '/static/mineIcon/sendBack.png'
  },
  {
    name: '全都订单',
    icon: '/static/mineIcon/allOrder.png'
  }
]
const mores = [
  {
    name: "地址管理",
    icon: '/static/mineIcon/address.png'
  },
  {
    name: "在线客服",
    icon: '/static/mineIcon/customer.png'
  },
  {
    name: "常见问题",
    icon: '/static/mineIcon/issue.png'
  },
  {
    name: "意见反馈",
    icon: '/static/mineIcon/feedback.png'
  },
]
const baseURL = ref(window.baseURL)
</script>

<template>
  <view class="mine">
    <view class="background content"/>
    <view class="container content">
      <view class="user">
        <u-image
            class="avatar"
            style="margin-right: 10px;"
            :src="`${baseURL}${userInfo.avatar}`"
            width="55px"
            height="55px"
            shape="circle"
        />
        <view class="containerInfo">
          <view class="info">
            <view class="name">{{userInfo['nickName']}}</view>
            <view class="phone">{{userInfo['phonenumber']}}</view>
          </view>
          <view class="settings">
            <image class="icon" src="/static/mineIcon/settings.png"></image>
          </view>
        </view>
      </view>
      <view class="containerCard">
        <view class="item card">
          <view class="info">
            <view class="total">0</view>
            <view class="title">累计回收（次）</view>
          </view>
          <image class="icon" src="/static/mineIcon/bookTotal.png"/>
        </view>
        <view class="item card">
          <view class="info">
            <view class="total">99999999.99</view>
            <view class="title">账号余额（元）</view>
          </view>
          <image class="icon" src="/static/mineIcon/moneyTotal.png"/>
        </view>
      </view>
      <view class="order content card">
        <view class="title">我的回收订单</view>
        <view class="containerOrder">
          <view class="item" v-for="(_,i) in orderList" :key="i">
            <image class="icon" :src="_.icon" />
            <view class="name">{{_.name}}</view>
          </view>
        </view>
      </view>
      <view class="more content card">
        <view class="title">更多服务</view>
        <view class="server">
          <view class="item" v-for="(_,i) in mores" :key="i">
            <image class="icon" :src="_.icon" />
            <view class="name">{{_.name}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.mine{
  $height: 200px;
  width: 100%;
  height: calc(100vh - 44px - 50px);
  background: #eee;
  .background{
    width: 100%;
    height: $height;
    background: #EAFFFF;
  }
  .container{
    width: 100%;
    height: calc(100% - calc($height / 6));
    transform: translateY(- calc($height / 1.2));
    .user{
      width: 100%;
      height: 55px;
      display: flex;
      .containerInfo{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
          display: inline-flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          .name{
            font-size: 17px;
            font-weight: bold;
          }
        }
        .settings{
          width: 30px;
          height: 30px;
          border: 1px solid white;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          .icon{
            width: 70%;
            height: 70%;
          }
        }
      }
    }
    .containerCard{
      width: 100%;
      height: 70px;
      margin-top: 20px;
      display: flex;
      grid-gap: 5px;
      .item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        box-shadow: none;
        border: 2px solid white;
        .info{
          display: inline;
          .total{
            font-weight: bold;
            font-size: 22px;
          }
          .title{
            font-size: 12px;
            color: #666;
          }
        }
        .icon{
          width: 45px;
          height: 45px;
        }
      }
      .item:first-child{
        background: #DEF7FF;
      }
      .item:last-child{
        background: #FFECCB;
      }
    }
    .order{
      width: 100%;
      height: 115px;
      margin-top: 20px;
      .title{
        line-height: 20px;
        height: 20px;
      }
      .containerOrder{
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        height: calc(100% - 30px);
        width: 100%;
        .item{
          width: auto;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          .icon{
            width: 40px;
            height: 40px;
          }
          .name{
            font-size: 12px;
          }
        }
      }
    }
    .more{
      width: 100%;
      height: auto;
      margin-top: 20px;
      .title{
        height: 20px;
        line-height: 20px;
      }
      .server{
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        width: 100%;
        .item{
          width: auto;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .icon{
            width: 30px;
            height: 30px;
          }
          .name{
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>